<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动画</title>

    <style type="text/css">
        .wrapper {
            position: relative;
            width: 80%;
            height: 120px;
            border: 1px solid blue;
            margin: 25px auto;
        }
        
        .ball {
            position: absolute;
            left: 0;
            top: 0;
            width: 100px;
            height: 100px;
            border-radius: 50%;
            border: 1px solid gray;
            box-shadow: 0 0 5px 4px #dedede inset;
            margin: 10px 0;
            animation-name: zhourunfa;
            animation-duration: 5s;
            animation-iteration-count: infinite;
        }
        
        @keyframes zhourunfa {
            /* from 等同于 0% */
            from {
                left: 0;
            }
            /* to 等同于 100% */
            to {
                left: 100%;
            }
        }
        
        .first {
            /* normal 表示沿着动画关键帧的顺序(0%~100%)依次播放 */
            animation-direction: normal;
        }
        
        .second {
            /* reverse 表示沿着与动画关键帧顺序的相反顺序(100%~0%)依次播放 */
            animation-direction: reverse;
        }
        
        .third {
            /* alternate 表示先按照动画关键帧顺序(0%~100%)播放，而后再按照相反顺序(100%~0%)播放 */
            animation-direction: alternate;
        }
        
        .fourth {
            /* alternate-reverse 表示先按照动画关键帧顺序的相反顺序(100%~0%)播放，而后再按照正常顺序(0%~100%)播放 */
            animation-direction: alternate-reverse;
            animation-play-state: running;
        }
    </style>

</head>

<body>

    <div class="wrapper">
        <div class="ball first"></div>
    </div>

    <div class="wrapper">
        <div class="ball second"></div>
    </div>

    <div class="wrapper">
        <div class="ball third"></div>
    </div>

    <div class="wrapper">
        <div class="ball fourth"></div>
    </div>

</body>

</html>